<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="积分明细" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>

		<div class="main">
			<view class="u-page">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item class="item-integral" v-for="(item, index) in indexList" :key="index">
						<u-cell>

							<div slot="title">
								<p id="integral-type">
									分享奖励
								</p>
								<div id="integral-time-and-value">
									<span id="integral-time">2021-12-07 11:02:15</span>
									<span id="integral-value">+2 积分</span>
								</div>

							</div>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.main {
		width: 750rpx;
		height: 1370rpx;
		background-color: rgb(242, 242, 242);
		position: fixed;
		top: 90rpx;

	}

	.item-integral {
		background-color: rgb(255, 255, 255);
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	#item-integral-type {
		font-size: 20rpx;
		color: white;
	}

	#integral-type {
		font-size: 30rpx;
		color: #2c2c2c;
	}

	#integral-time-and-value {
		margin-top: 24rpx;
		position: relative;
		height: 40rpx;
	}



	#integral-time {
		font-size: 28rpx;
		color: #2e2e2e;
		position: absolute;
		text-align: center;
		left: 0;
	}

	#integral-value {
		font-size: 28rpx;
		color: #FF2928;
		text-align: center;
		position: absolute;
		right: 0;
	}
</style>